<template>
<div class="box">
                <ProTable
                :data="dataList"
                :page="{}"
                :column="column"
                :rowControl="[]"
                :elProps="elProps"
                :disabled="[]"
                :controlWidth="controlWidth"
           
                >
                <template #default="{ row, propname }">

                    <div v-if="propname === 'num'">
                          <el-input v-model="row[propname]" :min="1" type="number"></el-input>
                    </div>
                    <div v-if="propname === 'remark'">
                          <el-input v-model="row[propname]" ></el-input>
                    </div>
                </template>
                <template #search_operate>
                    <el-table-column  label="操作" fixed="right" width="240px" >

                        <template #default="scope">
                              <el-link  type="primary" @click="handDelete(scope.$index,scope.row)" :underline="false">
                                  刪除
                              </el-link>
                        </template>
                    </el-table-column>


                </template>
                </ProTable>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.current_page" :page-size="page.per_page" layout="total, prev, pager, next"
                :total="page.total">
                </el-pagination>
</div>
</template>

<script setup>
import { ref ,reactive,computed, watch} from 'vue' 
import {elProps,controlWidth} from './index.js'
import { loading ,closeLoading} from '@/common/function.js'

const column = {
  number:'編號',
  name:'名稱',
  num:'數量',
  remark:'備註',
}
// 添加產品
const search = ref('')

const page = reactive({current_page: 1,per_page: 10,total: 0,page_size: [10, 20, 30]})
const dataList = computed(()=>{
        const dataCodeList = tableData.value
        const pagesize = page.per_page
        const currentPage = page.current_page
        let newList = dataCodeList.slice((currentPage - 1) * pagesize, pagesize * currentPage)
        if(search.value !== ''){
          newList = newList.filter(v=>{
            return v.name.indexOf(search.value) !== -1
          })
        }
        return newList
})
   const handleSizeChange=(size)=> {
        page.per_page = size
      }
      const handleCurrentChange=(currentPage)=> {
        page.current_page = currentPage
      }
// 獲取產品數據
const tableData = ref([])

// 刪除產品數據
const handDelete = (index)=>{
tableData.value.splice(index, 1)
}

const props = defineProps({
    list:Object
})
console.log(props.list);
tableData.value = props.list
page.total = tableData.value.length
console.log(tableData.value.length);

watch(()=>props.list,(newval)=>{
tableData.value = newval
console.log(tableData.value);
page.total = tableData.value.length
})

</script>

<style lang='less'  scoped>
.box{
//   :deep(.el-dialog__body){
//   padding:0 20px!important;
//   }
//   :deep(.el-dialog__footer){
//     padding: 0 !important;

//   }
  :deep(.tableflex[data-v-0985d712]){
    margin-top: 15px;
  }
}
</style>